<template>
  <view>
    <!-- 使用自定义的搜索组件-->
    <my-search @toSearch="gotoSearch"></my-search>
    
    <view class="scroll-container">
      <!-- 左侧区域 -->
      <scroll-view class="scroll-left" scroll-y :style="{height: wh + 'px'}">
        <block v-for="(item, index) in cateList" :key="item.cat_id">
          <view :class="['scroll-left-item', index === active ? 'active' : '']" @click="ChangeIndex(index)">{{item.cat_name}}</view>
        </block>
      </scroll-view>
      <!-- 右侧侧区域 -->
      <scroll-view class="scroll-right" :style="{height: wh + 'px'}" scroll-y :scroll-top="scrollTop">
        <view class="cate-lv2" v-for="item in catLeve2" :key="item.cat_id">
          <!-- 二级标题 -->
          <view class="cate-lv2-titel">/ {{item.cat_name}} /</view>
          <!-- 三级分类列表 -->
          <view class="cate-lv3-list">
            <view class="cate-lv3-item" v-for="(ite,i) in item.children" :key="ite.cat_id" @click="goGoodsList(ite)">
              <image :src="ite.cat_icon.replace('dev', 'web')"></image>
              <text>{{ite.cat_name}}</text>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
  import badegeMi from '@/mixins/tabbar-badge.js'
  
  export default {
    // 使用mixins混入
    mixins: [badegeMi],
    data() {
      return {
        // 屏幕可视高度
        wh: 0,
        // 分类数据
        cateList: [],
        active: 0,
        // 二级分类
        catLeve2: [],
        scrollTop: 0
      };
    },
    onLoad() {
      // 获取可视区的高度
      const sysInfo = uni.getSystemInfoSync()
      // const sysInfo = uni.getWindowInfo() // 也可以获取可视区高度
      this.wh = sysInfo.windowHeight - 50
      // 调用分类数据的方法
      this.getCateList()
    },
    methods: {
      // 获取分类数据的方法
      async getCateList() {
        const { data: res } = await uni.$http.get('/api/public/v1/categories')
        console.log(res);
        if (res.meta.status !== 200) return uni.$showMsg()
        this.cateList = res.message
        this.catLeve2 = res.message[0].children
      },
      // 点击改变索引值-active
      ChangeIndex(i) {
        this.active = i
        // 点击不同的一级分配不同的二级菜单数据
        this.catLeve2 = this.cateList[i].children
        this.scrollTop = this.scrollTop === 0 ? 1 : 0
      },
      // 点击跳转至商品列表页面
      goGoodsList(item) {
        console.log(item)
        uni.navigateTo({
          url: '/subpkg/goods_list/goods_list?cid=' + item.cat_id
        })
      },
      // 跳转至搜索页
      gotoSearch() {
        uni.navigateTo({
          url: '/subpkg/search/search'
        })
      }
      
    }
  }
</script>

<style lang="scss" scoped>
.scroll-container {
  display: flex;
  .scroll-left {
    width: 120px;
    .scroll-left-item{
      line-height: 60px;
      text-align: center;
      background-color: #f7f7f7;
      font-size: 12px;
      &.active{
        background-color: #ffffff;
        position: relative;
        &:before {
          content: '';
          display: block;
          width: 3px;
          height: 30px;
          position: absolute;
          left: 0;
          top: 50%;
          transform: translate(0, -50%);
          background-color: #c00000;
        }
      }
    }
  }
  .scroll-right {
    background-color: #ffffff;
    // 二级分类标题
    .cate-lv2-titel{
      text-align: center;
      padding: 15px 0;
      font-weight: bold;
      font-size: 12px;
    }
    // 三级分类数据
    .cate-lv3-list{
      display: flex;
      flex-wrap: wrap;
      .cate-lv3-item{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 33.33%;
        margin-bottom: 10px;
        image{
          width: 60px;
          height: 60px;
        }
        text{
          font-size: 12px
        }
      }
    }
  }
}
</style>
